<template>
  <div class="details">
    <div
      class="head"
      :style="{
        backgroundImage: `url(${
          shopinfo.info && shopinfo.info.poi_back_pic_url
        })`,
      }"
    >
      <van-icon name="arrow-left" @click="goback()" />
      <span class="shopname">{{ shopinfo.info && shopinfo.info.name }}</span>
      <van-icon ref="shoucang" name="star-o" @click="handlecollect" />
    </div>
    <div class="top">
      <div class="sousuo">
        <input type="text" placeholder="搜索" />
      </div>
      <div class="option" v-for="(item, index) in optionlist" :key="index">
        <span>{{ item }}</span>
      </div>
    </div>
    <div class="bottom">
      <div class="aside">
        <div
          v-for="(item, index) in shopinfo.taglist"
          :key="index"
          @click="show(index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="right">
        <div
          class="item"
          v-for="(item, index) in shopinfo.taglist[index].goodlist"
          :key="index"
        >
          <img :src="item.picture" alt="" />
          <div class="msg">
            <div class="name">{{ item.name }}</div>
            <div class="intro">{{ item.month_saled_content }}</div>
            <div class="price">￥{{ item.min_price }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="zongjia">￥528</div>
      <div class="jiesuan">去结算</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";
import { collect } from "../api/index";
import { cancel } from "../api/index";
import { Toast } from "vant";

Vue.use(Toast);

Vue.use(Icon);
import { details } from "../api/index";
export default {
  data() {
    return {
      optionlist: ["点餐", "评价", "商家"],
      shopinfo: {},
      index: 0,
      userinfo: {}, //定义一个保存用户信息的空对象
    };
  },
  mounted() {
    details({ id: this.$route.params.id }).then((res) => {
      console.log(res.data.shopinfo);
      if (res.data.code == 200) {
        this.shopinfo = res.data.shopinfo;
      } else {
        this.$router.go(-1);
      }
    });
    this.userinfo = JSON.parse(localStorage.getItem("userinfo")); //获取到在localstorage中保存为字符串形式的数据，并将这个数据转化为JSON对象的格式，再将这个对象格式的数据放入定义的userifon的空变量中
    console.log(this.userinfo.id);
  },
  methods: {
    show(index) {
      this.index = index;
    },
    goback() {
      this.$router.go(-1);
    },
    handlecollect() {
      if ((this.$refs.shoucang.style.color == "red")) {
        cancel({userid: this.userinfo.id,
        shopid: this.shopinfo.mtWmPoiId}).then((res)=>{
           Toast({
          message: "取消收藏",
          icon: "like-o",
        });
        })
        this.$refs.shoucang.style.color = "white";
      }else{
         collect({
        userid: this.userinfo.id,
        shopid: this.shopinfo.mtWmPoiId,
      }).then((res) => {
        Toast({
          message: "已收藏",
          icon: "like-o",
        });
        this.$refs.shoucang.style.color = "red";
      });
      }
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input,
button {
  border: 0;
  outline: none;
}
.details {
  margin: 60px auto;
  width: 360px;
  height: 700px;
  border: 1px solid gray;
  border-radius: 10px;
}
.head {
  width: 100%;
  height: 100px;
  color: white;
  border-radius: 10px;
  text-align: center;
  line-height: 100px;
  margin-bottom: 10px;
}
.head .van-icon-arrow-left {
  margin-right: 30px;
}
.head .van-icon-star-o {
  margin-left: 30px;
}
.details .top {
  display: flex;
  margin-bottom: 20px;
  padding: 0 20px;
}
.details .top .sousuo input {
  width: 80px;
  height: 30px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 30px;
  border-radius: 20px;
  background-color: rgba(204, 204, 204, 0.273);
  color: black;
  margin-right: 20px;
}
.details .top .option {
  height: 30px;
  line-height: 30px;
}
.details .top .option span {
  margin-right: 20px;
}
.details .bottom {
  height: 450px;
  overflow: auto;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
::-webkit-scrollbar {
  display: none;
}
.details .bottom .aside {
  height: 450px;
  overflow: auto;
}
.details .bottom .aside div {
  margin-bottom: 10px;
}
.details .bottom .right .item {
  display: flex;
  margin-bottom: 10px;
}
.details .bottom .right img {
  width: 80px;
  height: 80px;
  border: 1px solid gray;
  margin-right: 10px;
}
.details .bottom .right .msg .name {
  font-size: 12px;
  font-weight: 700;
}
.details .bottom .right .msg .intro {
  color: gray;
  font-size: 10px;
}
.details .bottom .right .msg .price {
  color: red;
  font-size: 12px;
  font-weight: 700;
  margin-top: 10px;
}
.details .foot {
  height: 90px;
  width: 100%;
  background-color: rgba(128, 128, 128, 0.471);
  color: white;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
}
.details .foot .zongjia {
  font-size: 20px;
  margin-top: 20px;
}
.details .foot .jiesuan {
  background-color: rgb(46, 191, 87);
  width: 100px;
  border-radius: 10px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  margin-top: 20px;
}
</style>